<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>课程管理</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
    <div class="layui-container">
        <div class="layui-row" style="margin-top: 20px;">
            <div class="layui-col-md12">
                <button class="layui-btn" id="addCourse">添加课程</button>
                <table id="courseTable" lay-filter="courseTable"></table>
            </div>
        </div>
    </div>

    <!-- 添加课程的表单模板 -->
    <script type="text/html" id="addCourseForm">
        <form class="layui-form" style="margin: 20px;" lay-filter="addCourseForm">
            <div class="layui-form-item">
                <label class="layui-form-label">课程名称</label>
                <div class="layui-input-block">
                    <input type="text" name="courseName" required lay-verify="required" placeholder="请输入课程名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="addCourseSave">保存</button>
                </div>
            </div>
        </form>
    </script>

    <!-- 编辑课程的表单模板 -->
    <script type="text/html" id="editCourseForm">
        <form class="layui-form" style="margin: 20px;" lay-filter="editCourseForm">
            <div class="layui-form-item">
                <label class="layui-form-label">课程ID</label>
                <div class="layui-input-block">
                    <input type="text" name="id" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">课程名称</label>
                <div class="layui-input-block">
                    <input type="text" name="courseName" required lay-verify="required" placeholder="请输入课程名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="editCourseSave">保存</button>
                </div>
            </div>
        </form>
    </script>

    <!-- 表格操作按钮 -->
    <script type="text/html" id="tableBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script src="../../static/layui/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer'], function(){
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.$;
            
            // 设置全局 Ajax 默认值
            $.ajaxSetup({
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true
            });
            
            // 初始化表格
            table.render({
                elem: '#courseTable',
                url: 'http://localhost:8050/api/backend/course/list',
                headers: {
                    'Content-Type': 'application/json'
                },
                xhrFields: {
                    withCredentials: true
                },
                parseData: function(res) {
                    console.log('服务器返回数据:', res); // 添加调试日志
                    return {
                        "code": 0,  // LayUI 表格要求成功状态码为 0
                        "msg": res.message,
                        "count": res.data ? res.data.length : 0,
                        "data": res.data || []
                    };
                },
                cols: [[
                    {field: 'id', title: 'ID', width: 80},
                    {field: 'courseName', title: '课程名称'},
                    {field: 'createTime', title: '创建时间', templet: function(d){
                        return d.createTime ? d.createTime.substring(0, 19).replace('T', ' ') : '';
                    }},
                    {fixed: 'right', title: '操作', toolbar: '#tableBar', width: 150}
                ]]
            });
            
            // 修改添加课程按钮事件
            $('#addCourse').on('click', function(){
                layer.open({
                    type: 1,
                    title: '添加课程',
                    content: $('#addCourseForm').html(),  // 使用添加课程的表单
                    area: ['500px', '300px']
                });
            });
            
            // 表格工具条事件
            table.on('tool(courseTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'edit'){
                    layer.open({
                        type: 1,
                        title: '编辑课程',
                        content: $('#editCourseForm').html(),  // 使用编辑课程的表单
                        area: ['500px', '300px'],
                        success: function(layero, index){
                            form.val('editCourseForm', {
                                "id": data.id,
                                "courseName": data.courseName
                            });
                        }
                    });
                } else if(obj.event === 'del'){
                    layer.confirm('确定删除该课程吗？', function(index){
                        $.ajax({
                            url: 'http://localhost:8050/api/backend/course/remove/' + data.id,
                            type: 'DELETE',
                            success: function(res){
                                if(res.code === 200){
                                    layer.msg('删除成功');
                                    obj.del();
                                }else{
                                    layer.msg(res.message);
                                }
                            }
                        });
                        layer.close(index);
                    });
                }
            });
            
            // 添加课程表单提交事件
            form.on('submit(addCourseSave)', function(data){
                $.ajax({
                    url: 'http://localhost:8050/api/backend/course/add',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(data.field),
                    success: function(res){
                        if(res.code === 200){
                            layer.msg('添加成功');
                            layer.closeAll('page');
                            table.reload('courseTable');
                        }else{
                            layer.msg(res.message);
                        }
                    }
                });
                return false;
            });
            
            // 编辑课程表单提交事件
            form.on('submit(editCourseSave)', function(data){
                $.ajax({
                    url: 'http://localhost:8050/api/backend/course/edit',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(data.field),
                    success: function(res){
                        if(res.code === 200){
                            layer.msg('修改成功');
                            layer.closeAll('page');
                            table.reload('courseTable');
                        }else{
                            layer.msg(res.message);
                        }
                    }
                });
                return false;
            });
        });
    </script>
</body>
</html> 